JavaScript is one of the most popular programming languages in the world. It can do a lot and have some features that are ahead of many other languages.
In this article, we’ll look at some good parts of JavaScript objects.
JavaScript Objects
In JavaScript, the primitive types are their own types, and objects are object types.
Primitive types are numbers, booleans, strings, null , undefined , symbols and bigint.
Everything else is objects.
Objects in JavaScript are mutable kets collections. Also, arrays are objects.
Regular expressions are also objects. And objects are objects.
An object is a container of properties. Properties have names and values.
A property can be a string, including the empty string. A value can be any JavaScript value except for undefined .
There are no true classes in JavaScript. There are no constraints on how property keys and values are structured.
Objects can contain other objects, so we can use them to represent tree structures.
We can implement inheritance with prototypes.
A prototype is a template object that other objects can inherit properties from.
Object Literals
Object literals are a way convenient way for us to define objects.
We create one by adding curly braces and then add key-value pairs inside it.
Property keys can be strings and values can be anything.
We can use any string as property names, including an empty string.
If our name is a valid identifier name and it’s not a reserved word, then we don’t need quotes.
For instance, we can create an object literal by writing:
const obj = {
'foo': 1,
'bar': false
}
or we can write:
const obj = {
foo: 1,
bar: false
}
since foo and bar are valid identifier names.
Objects can be nested, we can write:
const obj = {
'foo': 1,
'bar': {
'baz': 2
}
}
Retrieval
We can get a property’s value either with the dot notation or the bracket notation.
The . notation is better because it’s shorter and easier to read.
For instance, we can write:
obj.foo
and get 1.
And we can write:
obj.bar.baz
to get 2.
The bracket notation is mainly used for accessing properties dynamically and also for getting properties that are invalid identifiers.
For instance, we can write:
obj["first-name"]
to get the 'first-name' property of obj .
If we try to get a property from something that’s undefined , then we’ll get a TypeError exception.
The prevent that from happening, we need to use the && operator as follows:
obj.bar && obj.bar.baz
Now obj.bar.baz is run only with obj.bar is defined.
Update
We can update object property values by using the assignment operator.
For instance, we can write:
obj['foo'] = 3;
or write:
obj.foo = 3;
Reference
Objects are always passed by reference. Therefore, if we modify an object’s property value as follows:
const obj = {
'foo': 1,
'bar': {
'baz': 2
}
}
const obj2 = obj;
obj.foo = 3;
Both obj.foo and obj2.foo are 3 instead of 1.
Prototype
Almost every object is linked to a prototype object from which inherit properties.
All objects by default are linked to Object.prototype .
The only exception is when we create an object as follows:
const obj = Object.create(null);
The argument for Object.create is the prototype of the object returned by Object.create.
Therefore, obj will have no prototype.
Otherwise, our object will have a prototype. For instance, if we create an empty object:
const obj = {};
We’ll see that the __proto__ property will have the properties of Object.prototype .
If we update a property, it’ll update the property on the object itself rather than its prototype.
The prototype link is only used for retrieval. If we get a value from an object and if it’s not in the object itself.
Then the JavaScript interpreter will get the value from the prototype.
If a property isn’t in the object itself or its prototypes, then undefined is returned.
This is called delegation.
Conclusion
JavaScript objects can be created with object literals.
Most objects have prototypes except for ones that are explicitly created without a prototype.
A prototype is an object where properties can be inherited from another object.
